<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 持股信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>
               <!-- <el-button
                        style="margin-right: 20px"
                        type="primary"
                        icon="el-icon-edit"
                        class="handle-del mr10"
                        @click="AddSelection"
                >股权分配</el-button>-->
                <el-select v-model="query.pid" placeholder="持股人" class="handle-select mr10"  >
                    <el-option key="1" label="请选择持股人" value=""></el-option>
                    <el-option
                            v-for="(item,index) in partnerList"
                            :key="index+'1'"
                            :value="item.pid"
                            :label="item.partnerName"
                    ></el-option>
                </el-select>
                <el-select v-model="query.cid" placeholder="公司" class="handle-select mr10"  >
                    <el-option key="1" label="请选择公司" value=""></el-option>
                    <el-option
                            v-for="(item,index) in companyList"
                            :key="index+'1'"
                            :value="item.cid"
                            :label="item.companyName"
                    ></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="30" align="center" prop="pinfoId" fixed></el-table-column>
                <el-table-column prop="b" label="持股人" width="100"  align="center" fixed></el-table-column>
                <el-table-column prop="a" label="公司" align="center"width="200"></el-table-column>
                <el-table-column prop="stockType" label="持股方式" align="center"width="150"></el-table-column>
                <el-table-column prop="stockPercent" label="出资比例(%)" align="center" width="150"></el-table-column>
                <el-table-column prop="shouldCapi" label="认缴出资额(万元)" align="center" width="180"></el-table-column>
                <el-table-column label="认缴时间" align="center" width="150">
                    <template slot-scope="scope">{{scope.row.shoudDate | formatDate}}</template>
                </el-table-column>
                <el-table-column prop="realCapi" label="实缴出资额(万元)" align="center" width="180"></el-table-column>
                <el-table-column label="实缴时间" align="center" width="150">
                    <template slot-scope="scope">{{scope.row.capiDate | formatDate}}</template>
                </el-table-column>
                <el-table-column label="认出资方式" align="center" prop="investType" width="150"></el-table-column>
                <el-table-column label="实出资方式" align="center" prop="investName" width="150"></el-table-column>
                <el-table-column label="股份类型" align="center" prop="typeshares" width="180"></el-table-column>
                <el-table-column label="最终受益股份(%)" align="center" prop="finalBenefitPercent" width="150"></el-table-column>
                <el-table-column label="职位" align="center" prop="job" width="100"></el-table-column>
                <el-table-column label="出任开始时间" align="center" width="150">
                    <template slot-scope="scope">{{scope.row.beginDate | formatDate}}</template>
                </el-table-column>
                <el-table-column label="公告时间" align="center" width="150">
                    <template slot-scope="scope">{{scope.row.announcementDate | formatDate}}</template>
                </el-table-column>
                <el-table-column label="结束时间" align="center" width="150">
                    <template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
                </el-table-column>
                <el-table-column label="薪资(万元)" align="center" prop="salary" width="150"></el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="修改" :visible.sync="editVisible" width="50%">
            <el-form :model="form" :rules="formRules" ref="form" label-width="180px" class="demo-ruleForm">
                <el-form-item label="公司" required prop="cid">
                    <el-input v-model="companyName" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="持股人" prop="pid" required>
                    <el-select v-model="form.pid" placeholder="持股人" class="handle-select mr10" >
                        <el-option key="1" label="请选择持股人" value=""></el-option>
                        <el-option
                                v-for="(item,index) in partnerList"
                                :key="index+'1'"
                                :value="item.pid"
                                :label="item.partnerName"
                        ></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="投资人类型" required prop="stockType">
                    <el-select v-model="form.stockType" placeholder="投资人类型" class="handle-select mr10"  >
                        <el-option  key="1" label="请选择投资人类型" value=""></el-option>
                        <el-option key="2" label="自然人股东" value="自然人股东"></el-option>
                        <el-option key="3" label="法人股东" value="法人股东"></el-option>
                        <el-option key="4" label="事业法人" value="事业法人"></el-option>
                        <el-option key="5" label="机关法人" value="机关法人"></el-option>
                        <el-option key="6" label="企业法人" value="企业法人"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item required prop="shouldCapi" label="认缴出资额（万元）">
                    <el-input v-model="form.shouldCapi"></el-input>
                </el-form-item>
                <el-form-item  label="认缴出资时间" required prop="shoudDate">
                    <el-date-picker
                            v-model="form.shoudDate"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  required prop="investType" label="出资方式">
                    <el-select v-model="form.investType" placeholder="请选择出资方式" class="handle-select mr10">
                        <el-option key="1" label="请选择出资方式" value=""></el-option>
                        <el-option key="2" label="货币" value="货币"></el-option>
                        <el-option key="3" label="非货币（现物）" value="非货币（现物）"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  required prop="realCapi" label="实缴出资额（万元）">
                    <el-input v-model="form.realCapi"></el-input>
                </el-form-item>
                <el-form-item  required prop="capiDate" label="实缴时间">
                    <el-date-picker
                            v-model="form.capiDate"
                            type="date"
                            prop="capiDate"
                            placeholder="选择日期"
                            :picker-options="capiTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="职位">
                    <el-input v-model="form.job"></el-input>
                </el-form-item>
                <el-form-item  label="薪资">
                    <el-input v-model="form.salary"></el-input>
                </el-form-item>
                <el-form-item  label="股份类型">
                    <el-select v-model="form.typeshares" placeholder="请选择股份类型" class="handle-select mr10">
                        <el-option key="1" label="请选择股份类型" value=""></el-option>
                        <el-option key="2" label="流通A股" value="流通A股"></el-option>
                        <el-option key="3" label="流通B股" value="流通B股"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="出任开始时间">
                    <el-date-picker
                            v-model="form.beginDate"
                            type="date"
                            placeholder="选择日期"
                            prop="beginDate">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="结束时间">
                    <el-date-picker
                            v-model="form.endDate"
                            type="date"
                            prop="endDate"
                            placeholder="选择日期"
                            :picker-options="endTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="公告时间">
                    <el-date-picker
                            v-model="form.announcementDate"
                            type="date"
                            prop="announcementDate"
                            placeholder="选择日期"
                            :picker-options="announcementTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click=" resetForm('form')">取 消</el-button>
                    <el-button type="primary" @click="saveEdit('form')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import {formatTimeToStr} from '../common/date.js';
        export default {
            name: "PartnerInfo",
            data() {
                var isNum = (rule, value, callback) => {
                    console.log(value)
                    var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                    if (reg.test(value)) {
                        if(value<= this._data.nums){
                            callback()
                        }else {
                            callback(new Error('请输入0~'+this._data.nums+'有效字符'))
                        }
                    }else{

                        callback(new Error('请输入有效字符'))
                    }
                }
                return {
                    query: {
                        cid: '',
                        pid: '',
                        pageIndex: 0,
                        pageSize: 5
                    },
                    form:{
                        pinfoId:'',
                        pid:'',
                        cid:'',
                        stockType:'',
                        stockPercent:'',
                        shouldCapi:'',
                        shoudDate:'',
                        investType:'',
                        investName:'',
                        realCapi:'',
                        capiDate:'',
                        job:'',
                        finalBenefitPercent:'',
                        salary:'',
                        typeshares:'',
                        beginDate:'',
                        endDate:'',
                        announcementDate:''
                    },
                    formRules:{
                        pid: [
                            { required: true, message: '请选择持股人', trigger: 'change' }
                        ],
                        realCapi: [
                            { required: true, validator:isNum, trigger: 'blur' }
                        ],
                        shouldCapi: [
                            { required: true, validator:isNum,  trigger: 'blur' }
                        ]

                    },
                    // 开始时间小于结束时间，且开始时间小于此刻
                    announcementTime: {
                        disabledDate: time => {
                        if (this.form.endDate) {
                    return time.getTime() < new Date(this.form.endDate).getTime()
                } else {
                    return time.getTime() > Date.now()
                }
            }
            },
                // 结束时间大于开始时间，且小于此刻
                endTime:{
                    disabledDate:time => {
                        if (this.form.startDate) {
                            time.getTime() > new Date(this.form.startDate).getTime()
                        } else {
                            return time.getTime() < Date.now()
                        }
                    }
                },
                capiTime:{
                    disabledDate:time => {
                        if (this.form.ShoudDate) {
                            time.getTime() < new Date(this.form.ShoudDate).getTime()
                        } else {
                            return time.getTime() < Date.now()
                        }
                    }
                },
                partnerList:{},
                companyList:{},
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                detailVisible:false,
                idx: -1,
                id: -1,
                pageTotal: 10,
                companyName:'',
                numbers:'',
                nums:''

            };
            },
            created() {
                this.getPartner();
                this.getCompany();
                this.getData(this.query);

            },
            methods: {
                getData() {
                    const _this = this;
                    _this.$axios.post("/partnerinfo/page",_this.query).then(res => {
                        console.log(res)
                        _this.tableData =res.data.data.list;
                    _this.pageTotal=res.data.data.totalCount;


                })
                },
                getPartner() {
                    const _this = this
                    _this.$axios.get("/partner/finaAll").then(res =>  {
                        _this.partnerList = res.data.data
                })

                },
                getCompany() {
                    const _this = this
                    _this.$axios.get("/companydata/finaAll").then(res =>  {
                        _this.companyList = res.data.data
                })

                },
                // 触发搜索按钮
                handleSearch() {
                    this.$set(this.query, 'pageIndex', 0);
                    this.getData();
                },
                // 删除操作
                handleDelete(index, row) {
                    // 二次确认删除
                    this.$confirm('确定要删除吗？', '提示', {
                        type: 'warning'
                    }).then(()=>{
                        this.$axios.get("/partnerinfo/del/"+row.pinfoId).then(res =>{
                        if(res.status = 200){
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                        this.getData();
                    }

                });
                }).catch(() => {});
                },
                // 多选操作
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                delAllSelection() {
                    const length = this.multipleSelection.length;
                    if(length!=0){
                        // 二次确认删除
                        this.$confirm(`确定要删除这${length}条数据吗？`, '提示', {
                            type: 'warning'
                        }).then(()=>{
                            let str = '';
                        this.delList = this.delList.concat(this.multipleSelection);
                        for (let i = 0; i < length; i++) {
                            console.log(this.multipleSelection[i].pinfoId);
                            str += this.multipleSelection[i].companyName + ' ';
                            this.$axios.get("/partnerinfo/del/"+this.multipleSelection[i].pinfoId).then(res =>{
                                if(res.status = 200){
                                this.tableData.splice(this.multipleSelection[i], 1);
                                this.getData();
                            }

                        });
                        }
                        this.$message.error(`删除了${length}条数据`);
                        this.multipleSelection = [];
                    }).catch(() => {});
                    }else {
                        this.$message.error(`请选择要删除的数据！`);
                    }
                },
                // 编辑操作
                handleEdit(index, row) {
                    this.idx = index;
                    console.log(row)
                    this.$axios.get('/partnerinfo/' + row.pinfoId).then((res) => {
                        this.form=res.data.data;
                    this.getCompanyNum(res.data.data.cid);
                })
                    this.editVisible = true;
                },
                // 保存编辑
                saveEdit(formName) {
                    const  _this =this;
                    _this.$refs[formName].validate((valid) => {
                        if(valid) {
                            const num =parseFloat(_this.form.realCapi / _this.numbers*100).toFixed(2);
                            _this.form.investName = _this.form.investType;
                            _this.form.stockPercent =num;
                            _this.form.finalBenefitPercent =num;
                            _this.$axios.post("/partnerinfo/saveEdit", _this.form).then(res => {
                            if(res.status = 200){
                                //_this.$message.success(res.data.msg);
                                _this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                                _this.$set(this.tableData, this.idx, this.formPartner);
                                _this.editVisible = false;
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        });
                        } else {
                            console.log('error submit!!');
                    return false;
                }
                });

                },
                // 分页导航
                handlePageChange(val) {
                    this.$set(this.query, 'pageIndex', val);
                    this.getData();
                },
                getCompanyNum(id){
                    const  _this =this;
                    if (id != undefined) {
                        this.$axios.get('/companydata/numberSum/' + id).then((res) => {
                            console.log(res.data.data);
                        _this.form.cid=id;
                        _this.companyName=res.data.data.companyName;
                        _this.numbers=res.data.data.paidCapital;
                        _this.nums=res.data.data.registerCapital;
                    })
                    }
                }

            },
            filters: {
                formatDate: function (time) {
                    if (time != null && time != "") {
                        var date = new Date(time);
                        return formatTimeToStr(date, "yyyy-MM-dd");
                    } else {
                        return "";
                    }
                }
            }
        }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-input_min{
        width: 150px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>